<template>
  <div ref="scroll">
    <slot></slot>
  </div>
</template>

<script>
  import BScroll from '@better-scroll/core'
  import observeDOM from '@better-scroll/observe-dom'
  import Pullup from '@better-scroll/pull-up'
  BScroll.use(observeDOM)
  BScroll.use(Pullup)
    export default {
        name: "Scroll",
        props: {
            probeType: {
                type: Number,
                default: 1
            },
            lisen: {
                type: Boolean,
                default: false
            },
            click: {
                type: Boolean,
                default: true
            },
            pullUp: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            init(){
                this.scroll = new BScroll(this.$refs.scroll,{
                    click: this.click,
                    observeDOM: true,
                    probeType: this.probeType,
                    pullUpLoad: this.pullUp
                })
                if (this.lisen){
                    const vm = this
                    this.scroll.on('scroll',(pos) => {
                        vm.$emit('scroll',pos.y)
                    })
                }
                if(this.pullUp){
                   const vm = this
                    this.scroll.on('pullingUp',()=>{
                        vm.$emit('pullup')
                    })
                }
            },
            refresh(){
                this.scroll && this.scroll.refresh()
            },
            scrollTo(){
                this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments)
            },
            scrollToEle(){
                this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
            },
            finishPullUp(){
                this.scroll && this.scroll.finishPullUp()
            }
        },
        mounted(){
            setTimeout(()=>{this.init()},20)
        }
    }
</script>

<style scoped>

</style>
